<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>话题</title>
    <script src="../../js/flexible.js"></script>
    <link rel="stylesheet" href="../../css/common/base.css">
    <link rel="stylesheet" href="../../css/common/header-footer.css">
    <link rel="stylesheet" href="../../css/cl/common.css">
    <link rel="stylesheet" href="../../css/cl/huati.css">
</head>
<body>
    <!-- 头部------------------- -->
    <header>
        <div class="header_top">
            <img src="../../img/信号组.png" alt="">
            <span class="header_time">上午 9:51</span>
            <span class="ht_right">
                <img src="../../img/蓝牙图标.png" alt="">
                <img src="../../img/电量百分比.png" alt="">
                <img src="../../img/电量图标.png" alt="">
            </span>
        </div>
        <div class="header_bottom">
            <div class="hb_left">
                <!-- <img src="../../img/返回按钮-1.png" alt=""> -->
                <!-- 需要更改title文字 -->
                <span class="title">&nbsp;话题</span>
            </div>
            <div class="hb_right">
                <img src="../../img/组 -1.png" alt="">
            </div>
        </div>
    </header>
    <!-- 头部 -->

    <div class="header"></div>
    <!-- 搜索框 -->
    <section class="sec1">
        <div class="search">
            <img src="../../img/搜索.png" alt="">
            <span>搜索</span>
        </div>
    </section>
    <!-- 话题nav -->
    <nav>
        <ul class="huati_nav">
            <li>
                <a href="#" class="zonghe">综合</a>
            </li>
            <li>
                <a href="#">阳关爱心社</a>
            </li>
            <li>
                <a href="#">西朔武社</a>
            </li>
            <li>
                <a href="#">ER</a>
            </li>
        </ul>  
        <!-- 更多 -->
        <div class="gengduo" id="id_gengduo">
            <span>更多</span>
            <span class="more" id="id_more"></span>
        </div>
        <!-- 更多内容 -->
        <div class="more_content" id="id_more_content">
            <div class="chuangjian">
                <a href="../cl/chuangjian.html">
                    <span>+</span>
                    <span>创建我的团体</span>
                </a>
            </div>
            <ul class="tuijian">
                <li>
                    <a href="#">阳光爱心社</a>
                </li>
                <li>
                    <a href="#">西朔武社</a>
                </li>
                <li>
                        <a href="#">健身社团</a>
                </li>
                <li>
                    <a href="#">ERP协会</a>
                </li>
                <li>
                    <a href="#">广播台</a>
                </li>
                <li>
                    <a href="#">散打协会</a>
                </li>
                <li>
                    <a href="#">辩论队</a>
                </li>
                <li>
                    <a href="#">五星乒协</a>
                </li>
                <li>
                    <a href="#">蒲公英公益</a>
                </li>
                <li>
                    <a href="#">跆拳道协会</a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- 遮罩 -->
    <div class="zz" id="id_zz"></div>
    <div class="empty"></div>
    <!-- main -->
    <section class="main">
        <div class="first">
            <div class="mine">
                <div class="touxiang" id="lixiaohong">
                    <img src="../../img/cl/头像_1.jpg" alt="">
                </div>
                <div class="name">
                    <span>李晓红</span>
                    <span>阳光爱心社</span>
                </div>
            </div>
            <div class="content">
                <p>
                    <span>#那只敏捷的棕毛狐狸跃过那只懒狗#</span>
                    那只敏捷的棕毛狐狸跃过那只懒狗。 那只敏捷的棕毛狐狸跃过那只懒狗。
                </p>
            </div>
            <div class="content_img">
                <div>
                    <img src="../../img/cl/img01.jpg" alt="">
                    <img src="../../img/cl/img02.jpg" alt="">
                </div>
            </div>
            <div class="fenxiang">
                <div>
                    <img src="../../img/cl/分享.png" alt="">
                    <span>分享</span>
                </div>
                <div>
                    <img src="../../img/cl/message.png" alt="">
                    <span>13</span>
                </div>
                <div>
                    <img src="../../img/cl/点赞.png" alt="">
                    <span>47</span>
                </div>
            </div>
        </div>
        <div>
            <div class="mine">
                <div class="touxiang">
                    <img src="../../img/cl/头像_3.jpg" alt="">
                </div>
                <div class="name">
                    <span>筱筱</span>
                    <span>西朔武社</span>
                </div>
            </div>
            <div class="content">
                <p>
                    <span>#2022 心想事成#</span>
                    2022年，我要暴富！！！！
                </p>
            </div>
            <div class="content_img">
                <div>
                    <img src="../../img/cl/img09.jpg" alt="">
                    <img src="../../img/cl/img10.jpg" alt="">
                    <img src="../../img/cl/img07.jpg" alt="">
                    <img src="../../img/cl/img08.jpg" alt="">
                </div>
            </div>
            <div class="fenxiang">
                <div>
                    <img src="../../img/cl/分享.png" alt="">
                    <span>分享</span>
                </div>
                <div>
                    <img src="../../img/cl/message.png" alt="">
                    <span>13</span>
                </div>
                <div>
                    <img src="../../img/cl/点赞.png" alt="">
                    <span>47</span>
                </div>
            </div>
        </div>
        <div>
            <div class="mine">
                <div class="touxiang">
                    <img src="../../img/cl/img05.jpg" alt="">
                </div>
                <div class="name">
                    <span>半夏</span>
                    <span>广播台</span>
                </div>
            </div>
            <div class="content">
                <p>
                    <span>#心想事成#</span>
                    时刻提醒自己:缺的是钱,不是爱情。
                </p>
            </div>
            <div class="content_img">
                <div>
                    <img class="dantu" src="../../img/cl/img03.jpg" alt="">
                </div>
            </div>
            <div class="fenxiang">
                <div>
                    <img src="../../img/cl/分享.png" alt="">
                    <span>分享</span>
                </div>
                <div>
                    <img src="../../img/cl/message.png" alt="">
                    <span>13</span>
                </div>
                <div>
                    <img src="../../img/cl/点赞.png" alt="">
                    <span>47</span>
                </div>
            </div>
        </div>
    </section>
    <!-- 空盒子 -->
    <div style="width: 100%;height: 80px;background-color: #fff;"></div>
     <!-- 底部 -->
     <footer>
        <ul>
            <li id="shouye">
                <a href="../trm/shouye.html">
                    <img src="../../img/返回首页.png" alt="">
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="../cl/huati.html"  id="huati">
                    <img src="../../img/活动.png" alt="">
                    <span>话题</span>
                </a>
            </li>
            <li id="fatei">
                <a href="../cl/fabutiezi.html">
                    <img src="../../img/组 359.png" alt="">
                    <span>帖子</span>
                </a>
            </li>
            <li id="xiaoxi">
                <a href="../cl/xiaoxi.html">
                    <img src="../../img/cl/消息 (2).png" alt="">
                    <span>消息</span>
                </a>
            </li>
            <li id="wode">
                <a href="../wzy/wode.html">
                    <img src="../../img/组 358.png" alt="">
                    <span>我的</span>
                </a>
            </li>
        </ul>
    </footer>
</body>
<script>
    var  clicks = document.getElementById("id_gengduo");
    var temp = 0;
    clicks.addEventListener("click",function(){
        var id_more = document.getElementById("id_more");
        var id_more_content = document.getElementById("id_more_content");
        var id_zz = document.getElementById("id_zz");
        if(temp == 0){
            id_more.style.transform = "rotate(-90deg)";
            id_more_content.style.display = "inline-block";
            id_zz.style.display = "block";
            id_zz.style.zIndex = "1";
            temp = 1;
        }else{
            id_more.style.transform = "rotate(0deg)";
            id_more_content.style.display = "none";
            id_zz.style.display = "none";
            id_zz.style.zIndex = "-222222";
            temp = 0;
        }
    });
    var  lixiaohong= document.getElementById("lixiaohong");
    lixiaohong.addEventListener("click",function(){
        window.location.href="../trm/grxingxi.html";
    });
</script>
</html>